<template>
  <div
    style="
      position: absolute;
      top: 0;
      left: 0;
      margin: 0;
      padding: 0;
      background: red;
      width: 100%;
      height: 100%;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      display: flex;
    "
    :style="{
      background: 'url(' + backgroundImage + ')',
    }"
  >
    <el-dialog
      :show-close="false"
      :visible.sync="centerDialogVisible"
      width="50%"
      :center="false"
    >
      <div style="width: 100%; display: flex; flex-direction: column">
        <div
          style="
            width: 100%;
            display: flex;
            justify-content: space-between;
            background: linear-gradient(to right, #26948b, #93fe6e);
            color: white;
            height: 30px;
            align-items: center;
          "
        >
          <div>添加菜单</div>
          <div>x</div>
        </div>
        <div
          style="
            width: 100%;
            background: #161c18;
            opacity: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
          "
        >
          <div
            style="
              width: 80%;
              text-align: left;
              color: #27c48f;
              font-size: 1vw;
              margin-top: 20px;
            "
          >
            菜单名称
          </div>
          <input
            style="
              width: calc(80% - 40px);
              height: 30px;
              padding: 0 20px;
              background: #0d1709;
              color: white;
              border: #27c48f 1px solid;
              outline: 0;
              border-radius: 5px;
              margin: 20px 0;
            "
          />
          <div
            style="width: 80%; text-align: left; color: #27c48f; font-size: 1vw"
          >
            关联节目单
          </div>
          <div
            style="
              width: 80%;
              display: flex;
              align-items: center;
              height: 400px;
            "
          >
            <div
              style="
                flex: 1;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
              "
            >
              <div
                style="
                  width: 80%;
                  height: 80%;
                  background: #000000;
                  margin: 50px 0;
                  border-radius: 20px;
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  overflow: auto;
                  -ms-overflow-style: none;
                  scrollbar-width: none;
                "
              >
                <div
                  style="
                    width: 80%;
                    display: flex;
                    align-items: center;
                    margin-top: 20px;
                  "
                >
                  <div style="color: #b3b3b3">选择资源：</div>
                  <div
                    style="
                      flex-shrink: 0;
                      height: 40px;
                      flex: 1;
                      background: #252424;

                      border-radius: 20px;
                      display: flex;
                      align-items: center;
                    "
                  >
                    <img
                      src="../assets/search.png"
                      style="width: 15px; height: 15px; margin-left: 20px"
                      alt=""
                    />
                    <input
                      v-model="searchForProgramList"
                      type="text"
                      style="
                        background: transparent;
                        border: 0;
                        outline: 0;
                        color: white;
                        margin-left: 10px;
                      "
                    />
                  </div>
                </div>
                <div
                  style="
                    display: flex;
                    align-items: center;
                    color: #e0e0e0;
                    width: 70%;
                    margin-top: 10px;
                    flex-shrink: 0;
                  "
                >
                  <input
                    type="checkbox"
                    v-model="selectAll"
                    @input="changeSelectAll"
                  />
                  <div style="flex: 1; text-align: left; margin-left: 10px">
                    全选
                  </div>
                </div>
                <div
                  v-for="(item, index) in tableData"
                  :key="index"
                  style="
                    display: flex;
                    align-items: center;
                    color: #e0e0e0;
                    width: 70%;
                    margin-top: 10px;
                    flex-shrink: 0;
                  "
                >
                  <input
                    type="checkbox"
                    v-model="item.selected"
                    @input="changeSelect(index)"
                  />
                  <div style="flex: 1; text-align: left; margin-left: 10px">
                    {{ item.program_name }}
                  </div>
                </div>
              </div>
            </div>
            <div
              style="
                flex: 1;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
              "
            >
              <div
                style="
                  width: 80%;
                  height: 80%;
                  background: #000000;
                  margin: 50px 0;
                  border-radius: 20px;
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  overflow: auto;
                  -ms-overflow-style: none;
                  scrollbar-width: none;
                "
              >
                <div
                  style="
                    width: 80%;
                    display: flex;
                    align-items: center;
                    margin-top: 20px;
                  "
                >
                  <div style="color: #b3b3b3">已选择：</div>
                  <div
                    style="
                      flex-shrink: 0;
                      height: 40px;
                      flex: 1;
                      background: #252424;

                      border-radius: 20px;
                      display: flex;
                      align-items: center;
                    "
                  >
                    <img
                      src="../assets/search.png"
                      style="width: 15px; height: 15px; margin-left: 20px"
                      alt=""
                    />
                    <input
                      @input="changeInput2"
                      v-model="searchForSelectedProgram"
                      type="text"
                      style="
                        background: transparent;
                        border: 0;
                        outline: 0;
                        color: white;
                        margin-left: 10px;
                      "
                    />
                  </div>
                </div>

                <draggable
                  v-model="selectedProgramList"
                  handle=".drag-handle"
                  style="
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                  "
                >
                  <div
                    v-for="(item, index) in selectedProgramList"
                    :key="index"
                    style="
                      display: flex;
                      align-items: center;
                      color: #e0e0e0;
                      width: 70%;
                      margin-top: 10px;
                      flex-shrink: 0;
                      justify-content: space-between;
                    "
                  >
                    <div style="flex: 1; text-align: left; margin-left: 10px">
                      {{ item.program_name }}
                    </div>
                    <div style="display: flex; align-items: center">
                      <img
                        class="drag-handle"
                        src="../assets/order.png"
                        style="width: 15px; height: 15px; cursor: pointer"
                        alt=""
                      />
                      <img
                        @click="deleteProgramInSelectedPrograms(index)"
                        src="../assets/删除.png"
                        style="
                          width: 15px;
                          height: 15px;
                          margin-left: 20px;
                          cursor: pointer;
                        "
                        alt=""
                      />
                    </div>
                  </div>
                </draggable>
              </div>
            </div>
          </div>
          <div
            style="
              width: 80%;
              display: flex;
              align-items: center;
              justify-content: center;
              margin-bottom: 20px;
            "
          >
            <button
              style="
                font-size: 1vw;
                color: white;
                padding: 5px 30px;
                background: #161e19;
                border: #33a681 1px solid;
                border-radius: 10px;
                outline: 0;
              "
            >
              取消
            </button>
            <button
              style="
                margin-left: 50px;
                font-size: 1vw;
                color: white;
                padding: 5px 30px;
                background: #33a681;
                border-radius: 10px;
                outline: 0;
              "
            >
              确认
            </button>
          </div>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      :show-close="false"
      :visible.sync="addProgramDialogVisible"
      width="50%"
      :center="false"
    >
      <div style="width: 100%; display: flex; flex-direction: column">
        <div
          style="
            width: 100%;
            display: flex;
            justify-content: space-between;
            background: linear-gradient(to right, #26948b, #93fe6e);
            color: white;
            height: 30px;
            align-items: center;
          "
        >
          <div>添加节目单</div>
          <div>x</div>
        </div>
        <div
          style="
            width: 100%;
            background: #161c18;
            opacity: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
          "
        >
          <div
            style="
              width: 80%;
              text-align: left;
              color: #27c48f;
              font-size: 1vw;
              margin-top: 20px;
            "
          >
            节目单名称
          </div>
          <input
            style="
              width: calc(80% - 40px);
              height: 30px;
              padding: 0 20px;
              background: #0d1709;
              color: white;
              border: #27c48f 1px solid;
              outline: 0;
              border-radius: 5px;
              margin: 20px 0;
            "
          />
          <div
            style="width: 80%; text-align: left; color: #27c48f; font-size: 1vw"
          >
            选择资源
          </div>
          <div
            style="
              width: 80%;
              display: flex;
              align-items: center;
              height: 400px;
            "
          >
            <div
              style="
                flex: 1;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
              "
            >
              <div
                style="
                  width: 80%;
                  height: 80%;
                  background: #000000;
                  margin: 50px 0;
                  border-radius: 20px;
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  overflow: auto;
                  -ms-overflow-style: none;
                  scrollbar-width: none;
                "
              >
                <div
                  style="
                    width: 80%;
                    display: flex;
                    align-items: center;
                    margin-top: 20px;
                  "
                >
                  <div style="color: #b3b3b3">选择资源：</div>
                  <div
                    style="
                      flex-shrink: 0;
                      height: 40px;
                      flex: 1;
                      background: #252424;

                      border-radius: 20px;
                      display: flex;
                      align-items: center;
                    "
                  >
                    <img
                      src="../assets/search.png"
                      style="width: 15px; height: 15px; margin-left: 20px"
                      alt=""
                    />
                    <input
                      v-model="searchForResourceList"
                      type="text"
                      style="
                        background: transparent;
                        border: 0;
                        outline: 0;
                        color: white;
                        margin-left: 10px;
                      "
                    />
                  </div>
                </div>
                <div
                  style="
                    display: flex;
                    align-items: center;
                    color: #e0e0e0;
                    width: 70%;
                    margin-top: 10px;
                    flex-shrink: 0;
                  "
                >
                  <input
                    type="checkbox"
                    v-model="selectAll"
                    @input="changeSelectAllForResource"
                  />
                  <div style="flex: 1; text-align: left; margin-left: 10px">
                    全选
                  </div>
                </div>
                <div
                  v-for="(item, index) in resourceList"
                  :key="index"
                  style="
                    display: flex;
                    align-items: center;
                    color: #e0e0e0;
                    width: 70%;
                    margin-top: 10px;
                    flex-shrink: 0;
                  "
                >
                  <input
                    type="checkbox"
                    v-model="item.selected"
                    @input="changeSelectForResource(index)"
                  />
                  <div style="flex: 1; text-align: left; margin-left: 10px">
                    {{ item.file }}
                  </div>
                </div>
              </div>
            </div>
            <div
              style="
                flex: 1;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
              "
            >
              <div
                style="
                  width: 80%;
                  height: 80%;
                  background: #000000;
                  margin: 50px 0;
                  border-radius: 20px;
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  overflow: auto;
                  -ms-overflow-style: none;
                  scrollbar-width: none;
                "
              >
                <div
                  style="
                    width: 80%;
                    display: flex;
                    align-items: center;
                    margin-top: 20px;
                  "
                >
                  <div style="color: #b3b3b3">已选择：</div>
                  <div
                    style="
                      flex-shrink: 0;
                      height: 40px;
                      flex: 1;
                      background: #252424;

                      border-radius: 20px;
                      display: flex;
                      align-items: center;
                    "
                  >
                    <img
                      src="../assets/search.png"
                      style="width: 15px; height: 15px; margin-left: 20px"
                      alt=""
                    />
                    <input
                      @input="changeInput2"
                      v-model="searchForSelectedResource"
                      type="text"
                      style="
                        background: transparent;
                        border: 0;
                        outline: 0;
                        color: white;
                        margin-left: 10px;
                      "
                    />
                  </div>
                </div>

                <draggable
                  v-model="selectedResourceList"
                  handle=".drag-handle"
                  style="
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                  "
                >
                  <div
                    v-for="(item, index) in selectedResourceList"
                    :key="index"
                    style="
                      display: flex;
                      align-items: center;
                      color: #e0e0e0;
                      width: 70%;
                      margin-top: 10px;
                      flex-shrink: 0;
                      justify-content: space-between;
                    "
                  >
                    <div style="flex: 1; text-align: left; margin-left: 10px">
                      {{ item.file }}
                    </div>
                    <div style="display: flex; align-items: center">
                      <img
                        class="drag-handle"
                        src="../assets/order.png"
                        style="width: 15px; height: 15px; cursor: pointer"
                        alt=""
                      />
                      <img
                        @click="deleteResourceInSelectedResources(index)"
                        src="../assets/删除.png"
                        style="
                          width: 15px;
                          height: 15px;
                          margin-left: 20px;
                          cursor: pointer;
                        "
                        alt=""
                      />
                    </div>
                  </div>
                </draggable>
              </div>
            </div>
          </div>
          <div
            style="
              width: 80%;
              display: flex;
              align-items: center;
              justify-content: center;
              margin-bottom: 20px;
            "
          >
            <button
              style="
                font-size: 1vw;
                color: white;
                padding: 5px 30px;
                background: #161e19;
                border: #33a681 1px solid;
                border-radius: 10px;
                outline: 0;
              "
            >
              取消
            </button>
            <button
              style="
                margin-left: 50px;
                font-size: 1vw;
                color: white;
                padding: 5px 30px;
                background: #33a681;
                border-radius: 10px;
                outline: 0;
              "
            >
              确认
            </button>
          </div>
        </div>
      </div>
    </el-dialog>
    <div
      style="
        position: absolute;
        top: 0;
        left: 0;
        background-repeat: no-repeat;
        background-size: auto;
        background-position: center;
        width: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
      "
    >
      <img
        id="titleBar"
        src="../assets/tbg.png"
        style="width: 100%; position: absolute; top: 0px; left: 0px"
        alt=""
      />
    </div>
    <div
      style="
        flex: 3;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
        margin: 0 20px;
      "
    >
      <div style="height: 12%"></div>
      <div
        style="
          flex: 1;
          margin-bottom: 10px;
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          position: relative;
        "
      >
        <img
          src="../assets/border1.png"
          style="
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            pointer-events: none;
          "
          alt=""
        />
        <div
          style="
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 20px 0;
          "
        >
          <div style="margin-left: 20px">节目单设置</div>
          <div style="display: flex; align-items: center">
            <div
              @click="openAddProgramWin"
              style="display: flex; align-items: center; cursor: pointer"
            >
              <img
                src="../assets/scan.png"
                style="width: 20px; height: 20px; margin-right: 10px"
                alt=""
              />
              <div style="cursor: pointer">添加节目单</div>
            </div>
            <div
              style="
                display: flex;
                align-items: center;
                margin-right: 20px;
                cursor: pointer;
              "
            >
              <img
                src="../assets/delete1.png"
                style="
                  width: 20px;
                  height: 20px;
                  margin-right: 10px;
                  margin-left: 10px;
                "
                alt=""
              />
              <div style="cursor: pointer">全部删除</div>
            </div>
          </div>
        </div>
        <div style="width: 90%; flex: 1">
          <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            :row-class-name="tableRowClassName"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column label="序号">
              <template slot-scope="scope">{{ scope.row.id }}</template>
            </el-table-column>
            <el-table-column label="节目名">
              <template slot-scope="scope">
                <div style="width: 100%; display: flex; flex-direction: column">
                  <div style="display: flex; align-items: center">
                    {{ scope.row.program_name }}
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="pgDuration"
              label="时长"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <div style="display: flex; align-items: center">
                  <img
                    @click="editResource(scope.row)"
                    src="../assets/editResource.png"
                    style="
                      width: 15px;
                      height: 15px;
                      margin-right: 10px;
                      cursor: pointer;
                    "
                    alt=""
                  />
                  <img
                    @click="playResource(scope)"
                    src="../assets/playResource.png"
                    style="
                      width: 15px;
                      height: 15px;
                      margin-right: 10px;
                      cursor: pointer;
                    "
                    alt=""
                  />
                  <img
                    @click="deleteProgressOrPlan(scope.row)"
                    src="../assets/deleteResource.png"
                    style="width: 15px; height: 15px; cursor: pointer"
                    alt=""
                  />
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div
      style="
        flex: 7;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
      "
    >
      <div
        style="
          width: 100%;
          height: 12%;
          display: flex;
          align-items: center;
          color: #ffffff;
          justify-content: space-between;
        "
      >
        <div style="display: flex; align-items: center">
          <div style="display: flex; align-items: center; cursor: pointer">
            <img
              src="../assets/saveSetting.png"
              style="width: 50px; height: 50px; margin: 0 10px"
              alt=""
            />
            <div>保存设置</div>
          </div>
          <div style="display: flex; align-items: center">
            <img
              src="../assets/cancel1.png"
              style="width: 50px; height: 50px; margin: 0 10px"
              alt=""
            />
            <div>取消</div>
          </div>
        </div>
        <div style="display: flex; align-items: center; margin-right: 10px">
          <div style="display: flex; align-items: center">
            <img
              src="../assets/changeTopic.png"
              style="width: 50px; height: 50px; margin: 0 10px"
              alt=""
            />
            <div>更换主题</div>
          </div>
          <div style="display: flex; align-items: center">
            <img
              src="../assets/goBack.png"
              style="width: 50px; height: 50px; margin: 0 10px"
              alt=""
            />
            <div>返回</div>
          </div>
        </div>
      </div>
      <div
        style="
          flex: 1;
          margin-bottom: 10px;
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          position: relative;
        "
      >
        <img
          src="../assets/border1.png"
          style="
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            pointer-events: none;
          "
          alt=""
        />
        <div
          style="
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 20px 0;
            color: white;
          "
        >
          <div style="margin-left: 20px">菜单列表</div>
          <div style="display: flex; align-items: center">
            <img
              @click="openAddProgramDialog"
              src="../assets/addMenuItem.png"
              style="
                width: 20px;
                height: 20px;
                margin-right: 20px;
                cursor: pointer;
              "
              alt=""
            />

            <img
              src="../assets/delete1.png"
              style="
                width: 20px;
                height: 20px;
                margin-right: 20px;
                cursor: pointer;
              "
              alt=""
            />
          </div>
        </div>
        <div style="width: 90%; flex: 1">
          <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            :row-class-name="tableRowClassName"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column label="序号">
              <template slot-scope="scope">{{ scope.row.id }}</template>
            </el-table-column>
            <el-table-column label="节目名">
              <template slot-scope="scope">
                <div style="width: 100%; display: flex; flex-direction: column">
                  <div style="display: flex; align-items: center">
                    {{ scope.row.program_name }}
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="pgDuration"
              label="时长"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <div style="display: flex; align-items: center">
                  <img
                    @click="editResource(scope.row)"
                    src="../assets/editResource.png"
                    style="
                      width: 15px;
                      height: 15px;
                      margin-right: 10px;
                      cursor: pointer;
                    "
                    alt=""
                  />
                  <img
                    @click="playResource(scope)"
                    src="../assets/playResource.png"
                    style="
                      width: 15px;
                      height: 15px;
                      margin-right: 10px;
                      cursor: pointer;
                    "
                    alt=""
                  />
                  <img
                    @click="deleteProgressOrPlan(scope.row)"
                    src="../assets/deleteResource.png"
                    style="width: 15px; height: 15px; cursor: pointer"
                    alt=""
                  />
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import request from "../axios/request";
export default {
  data() {
    return {
      backgroundImage: require("../assets/bg.png"),
      borderImage1: require("../assets/border1.png"),
      tableData: null,
      centerDialogVisible: false,
      selectedProgramList: [],
      selectAll: false,
      searchForSelectedProgram: null,
      searchForProgramList: null,
      addProgramDialogVisible: false,
      resourceList: [],
      searchForResourceList: null,
      searchForSelectedResource: null,
      selectedResourceList: [],
    };
  },
  methods: {
    changeSelectAllForResource() {
      this.selectAll = !this.selectAll;
      this.selectedResourceList = [];
      if (this.selectAll) {
        for (let index = 0; index < this.resourceList.length; index++) {
          const element = this.resourceList[index];
          element.selected = true;
          this.selectedResourceList.push(element);
        }
      } else {
        for (let index = 0; index < this.resourceList.length; index++) {
          const element = this.resourceList[index];
          element.selected = false;
        }
      }
    },
    checkAllSelectForResource() {
      for (let index = 0; index < this.resourceList.length; index++) {
        const element = this.resourceList[index];
        if (element.selected == false) {
          this.selectAll = false;
          return;
        }
      }
      this.selectAll = true;
    },
    checkAllSelect() {
      for (let index = 0; index < this.tableData.length; index++) {
        const element = this.tableData[index];
        if (element.selected == false) {
          this.selectAll = false;
          return;
        }
      }
      this.selectAll = true;
    },
    changeSelectForResource(index) {
      const element = this.resourceList[index];
      console.log(index);
      element.selected = !element.selected;
      if (element.selected) {
        this.selectedResourceList.push(element);
      } else {
        for (let index = 0; index < this.selectedResourceList.length; index++) {
          const selectedElement = this.selectedResourceList[index];
          if (selectedElement == element) {
            this.selectedResourceList.splice(index, 1);
            break;
          }
        }
      }

      this.checkAllSelectForResource();
    },
    changeSelect(index) {
      const element = this.tableData[index];
      console.log(index);
      element.selected = !element.selected;
      if (element.selected) {
        this.selectedProgramList.push(element);
      } else {
        for (let index = 0; index < this.selectedProgramList.length; index++) {
          const selectedElement = this.selectedProgramList[index];
          if (selectedElement == element) {
            this.selectedProgramList.splice(index, 1);
            break;
          }
        }
      }

      this.checkAllSelect();
    },
    changeInput2() {},
    changeSelectAll() {
      this.selectAll = !this.selectAll;
      this.selectedProgramList = [];
      if (this.selectAll) {
        for (let index = 0; index < this.tableData.length; index++) {
          const element = this.tableData[index];
          element.selected = true;
          this.selectedProgramList.push(element);
        }
      } else {
        for (let index = 0; index < this.tableData.length; index++) {
          const element = this.tableData[index];
          element.selected = false;
        }
      }
    },
    openAddProgramDialog() {
      this.centerDialogVisible = true;

      console.log(1234);
    },
    openAddProgramWin() {
      this.addProgramDialogVisible = true;
      this.getResourceList();
    },
    async getResourceList() {
      let res = await request({
        url:
          "/material/api/getResourceList/" + localStorage.getItem("user_name"),
        method: "GET",
      });
      if (res.data.status == 200) {
        this.resourceList = res.data.data.data;
      }
    },
    async getProgramList() {
      let res = await request({
        url: "/program/api/getProgramList",
        method: "POST",
        data: {
          command: 10,
          user_name: localStorage.getItem("user_name"),
          data: [
            {
              id: -1,
              pl_id: -1,
            },
          ],
        },
      });
      if (res.data.status == 200) {
        this.tableData = res.data.data.data;
      }
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 0) {
        console.log(0);
        return "row1";
      } else {
        console.log(1);
        return "row2";
      }
    },
  },
  mounted() {
    this.getProgramList();
  },
};
</script>
<style scoped>
/deep/ .el-dialog__header {
  display: none !important;
}

/deep/.el-dialog__body {
  padding: 0 !important;
}

/deep/ .el-table th {
  background-color: #00201f !important;
  color: #eeeeee !important;
}
/deep/ .el-table .row1 {
  background: transparent !important;
  color: #d2e2dd !important;
}

/deep/ .el-table .row2 {
  background: transparent !important;
  color: #d2e2dd !important;
}
/deep/ .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: initial !important;
}
/deep/ .el-table {
  background-color: transparent !important;
}

/* 修改表格主体区域的背景色 */
/deep/ .el-table__body {
  background-color: transparent !important;
}

/deep/ .el-table td,
.el-table th {
  border-bottom: 0px solid #25322e !important;
}

/deep/ .el-table {
  border: 0px solid #25322e !important;
}

/* 修改表头边框颜色 */
/deep/ .el-table--border th {
  border-right: 0px solid #25322e !important;
}

/* 修改表格行边框颜色 */
/deep/ .el-table--border td {
  border-right: 0px solid #25322e !important;
}
</style>